<template>
  <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-indigo-50">
    <div class="text-center px-4">
      <div class="mb-8">
        <FileQuestion class="w-32 h-32 text-gray-400 mx-auto" />
      </div>
      
      <h1 class="text-6xl font-bold text-gray-900 mb-4">404</h1>
      <h2 class="text-2xl font-semibold text-gray-700 mb-4">页面未找到</h2>
      <p class="text-gray-600 mb-8 max-w-md mx-auto">
        抱歉，您访问的页面不存在或已被删除。
      </p>
      
      <div class="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
        <button
          @click="goBack"
          class="inline-flex items-center space-x-2 px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium rounded-lg transition-colors"
        >
          <ArrowLeft class="w-5 h-5" />
          <span>返回上一页</span>
        </button>
        
        <router-link
          to="/"
          class="inline-flex items-center space-x-2 px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg transition-colors"
        >
          <Home class="w-5 h-5" />
          <span>返回首页</span>
        </router-link>
      </div>
      
      <!-- 常用链接 -->
      <div class="mt-12 pt-8 border-t border-gray-200">
        <p class="text-sm text-gray-600 mb-4">您可能在寻找：</p>
        <div class="flex flex-wrap items-center justify-center gap-4">
          <router-link
            to="/submit"
            class="text-blue-600 hover:text-blue-700 font-medium"
          >
            提交作文
          </router-link>
          <span class="text-gray-300">·</span>
          <router-link
            to="/history"
            class="text-blue-600 hover:text-blue-700 font-medium"
          >
            历史记录
          </router-link>
          <span class="text-gray-300">·</span>
          <router-link
            to="/login"
            class="text-blue-600 hover:text-blue-700 font-medium"
          >
            登录
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { 
  FileQuestion, 
  ArrowLeft, 
  Home 
} from 'lucide-vue-next';

/**
 * NotFoundPage 组件
 * 404错误页面
 */

// ==================== Composition API ====================
const router = useRouter();

// ==================== Methods ====================

/**
 * 返回上一页
 * 优先使用浏览器历史记录返回，如果没有历史则返回首页
 */
const goBack = () => {
  // 检查是否有历史记录可以返回
  if (window.history.length > 1 && document.referrer) {
    router.back();
  } else {
    // 如果没有历史记录，返回到首页
    router.push({ name: 'home' });
  }
};
</script>

